<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>Hello Amaze UI</title>
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="icon" type="image/png" href="assets/i/favicon.png">
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">
  <link rel="stylesheet" href="css/amazeui.min.css">
 <link rel="stylesheet" type="text/css" href="css/tp.css"/>
 <script src="js/amazeui.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery.min.js"></script> 
  
</head>
<style type="text/css">
	#uploadPreview,#uploadPreview1,#uploadPreview2{
		margin: 0 auto;
    width: 10rem;
    height: 10rem;                       
    background-size: cover;
    border: 1px dashed #666;
}
#uploadImage,#uploadImage1,#uploadImage2 {
	text-align: center;
	margin: 8px auto;
	font-size: 1.4rem;
	width: 10rem;
	
	
}	


</style>

<body>
  <header data-am-widget="header"
          class="am-header am-header-default ">     
      <h1 class="am-header-title">
      	<i class="am-icon-stack-overflow">最美女神评选</i>        
      </h1>    
  </header>
<div class="am-img">
	    <figure>
	    	<img src="images/am-img.jpg" alt=""/>
	    	<figcaption class="am-text-center">
	    	河南志信科技有限公司“念亲恩 母亲最美”评选活动
	    	</figcaption>
	    </figure>     
</div>
<div class="lxwm_title">
 		 	<h1>上传最美丽的自己，最多2张哦</h1>
 		 </div>
<div class="am-g">	
	<div class="am-u-sm-6">	
	<div id="uploadPreview"></div>
<input id="uploadImage" type="file" name=""  onchange="PreviewImage();" />
<script type="text/javascript">
	$("#uploadImage").on("change", function(){
    var files = !!this.files ? this.files : [];
    if (!files.length || !window.FileReader) return;
    if (/^image/.test( files[0].type)){ 
        var reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onloadend = function(){  
       $("#uploadPreview").css("background-image", "url("+this.result+")");
        
        }
    } 
});
</script>
	</div>

	<div class="am-u-sm-6">	
	<div id="uploadPreview1"></div>
<input id="uploadImage1" type="file" name=""  onchange="PreviewImage();" />
<script type="text/javascript">
	$("#uploadImage1").on("change", function(){
    var files = !!this.files ? this.files : [];
    if (!files.length || !window.FileReader) return;
    if (/^image/.test( files[0].type)){ 
        var reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onloadend = function(){  
       $("#uploadPreview1").css("background-image", "url("+this.result+")");
        
        }
    } 
});
</script>
	</div>
	<hr />
</div>
<hr />
<div class="lxwm_title">
 		 	<h1>参加报名</h1>
 		 </div>
 		 <div class="lxwm_form">
 <form action="" class="am-form" id="doc-vld-msg" data-am-validator>
  <fieldset>   
  	
    <div class="am-form-group">
      <label for="doc-vld-name-2-1">姓名：</label>
      <input type="text" id="doc-vld-name-2-1" minlength="2" placeholder="输入用户名（至少 2 个字符）" required/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-email-2-1">邮箱：</label>
      <input type="email" id="doc-vld-email-2-1" data-validation-message="自定义提示信息：输入地球上的电子邮箱撒" placeholder="输入邮箱" required/>
    </div>   
    <div class="am-form-group" data-am-validator>
      <label for="doc-vld-528">手机号：</label>
      <input type="text" id="doc-vld-528" class="js-pattern-mobile"
             placeholder="输入手机号" required/>
             
    </div>
    <div class="am-form-group">
      <label for="doc-vld-age-2-1">年龄：</label>
      <input type="number" class=""  id="doc-vld-age-2-1" placeholder="输入年龄  18-120" min="18" max="120" required />
    </div>
  
    <div class="am-form-group">
      <label>性别： </label>
      <label class="am-radio-inline">
        <input type="radio"  value="" name="docVlGender" required> 男
      </label>
      <label class="am-radio-inline">
        <input type="radio" name="docVlGender"> 女
      </label>
      <label class="am-radio-inline">
        <input type="radio" name="docVlGender"> 其他
      </label>
    </div>  
    <div class="am-form-group">
      <label for="doc-vld-ta-2-1">留言：</label>
      <textarea id="doc-vld-ta-2-1" minlength="10" maxlength="100"></textarea>
    </div>

    <button class="am-btn am-btn-secondary am-fl" type="submit">提交</button>
    <button class="am-btn am-btn-primary am-fr" type="reset">重置</button>
  </fieldset>
</form>

	<script type="text/javascript">
	$(function() {
  $('#doc-vld-msg').validator({
    onValid: function(validity) {
      $(validity.field).closest('.am-form-group').find('.am-alert').hide();
    },

    onInValid: function(validity) {
      var $field = $(validity.field);
      var $group = $field.closest('.am-form-group');
      var $alert = $group.find('.am-alert');
      var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

      if (!$alert.length) {
        $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
          appendTo($group);
      }

      $alert.html(msg).show();
    }
  });
 
if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.mobile = /^\s*1\d{10}\s*$/;
}
});					
</script>







	<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
     id="">
  <ul class="am-navbar-nav am-cf am-avg-sm-3 am-avg-lg-3">
    <li>
      <a href="indext.html">
        <span class="am-icon-home"></span>
        <span class="am-navbar-label">活动首页</span>
      </a>
    </li>
    <li>
      <a href="cygz.html">
        <span class="am-icon-qrcode"></span>
         <span class="am-navbar-label">活动奖励</span>
      </a>
    </li>
    <li >
      <a href="xspm.html">
        <span class="am-icon-arrows"></span>
        <span class="am-navbar-label">选手排名</span>
      </a>
    </li>
    <li>
      <a href="wybm.html">
        <span class="am-icon-user-plus"></span>
        <span class="am-navbar-label">我要报名</span>
      </a>
    </li>
    <li data-am-navbar-share>
      <a href="###">
        <span class="am-icon-share-square-o"></span>
        <span class="am-navbar-label">分享</span>
      </a>
    </li>
    
  </ul>
</div>


 
 
 
  <div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
  <a href="#top" title="">
    <img class="am-gotop-icon-custom" src="img/s.png"
    />
  </a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>
</body>
</html>